@import '@/lib/reset.scss';

.sectionLogin{
  display: none;
  // display: block;
  margin-top: 100px;
  .works-update{
    padding-top: 20px;
    .update-left{
      // width: 660px;
      float: left;
      .update-txt{
        margin-bottom: 20px;
        color: #909090;
        font-size: 16px;
        line-height: 1.8;
      }
      .update-list{
        width: 660px;
        min-height: 300px;
        ul{
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          li{
            width: 300px;
            margin-bottom: 20px;
            .update-list1{
              float: left;
              width: 60px;
              height: 60px;
              
              img{
                width: 100%;
                height: 100%;
                border-radius: 50%;
              }
            }
            .update-list2{
              float: left;
              width: 100px;
              margin: 0 20px;
              :nth-child(1){
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                a{
                  color: #222;
                  font-size: 14px;
                  &:hover{
                    color: #DD3915;
                  }
                }

              }
              :nth-child(2){
                font-size: 12px;
              }
              :nth-child(3){
                font-size: 12px;
              }
            }
            .update-list3{
              float: right;
              display: block;
              background: #DD3915;
              width: 80px;
              height: 40px;
              color: #fff;
              text-align: center;
              line-height: 40px;
              cursor: pointer;
            }
          }
        }
      }
    }
    .update-right{
      float: right;
      width:300px;
      height: 40px;
      line-height: 40px;
      margin-left: 20px;  
      font-size: 16px;
      span{
        font-size: 18px;
      }
      a{
        color: #DD3915;
        &:hover{
          background: #DD3915;
          color: #fff;
        }
      }
      .update-right1{
        padding: 15px;
        margin-bottom: 40px;
        background-color: #f5f6f5;
      }
      .update-right2{
        padding: 15px;
        line-height: 1.8;
        background-color: #f5f6f5;
      }
    }
  }
  .works-best{
    .last-container{
      margin: 0 auto;
      color: rgb(59, 58, 58);
      .last-container-list{
        width:1000px;
        height:800px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        li{
          width: 278px;
          height: 482px;
          border-bottom:1px solid #eee;
          margin-bottom: 30px;
          .last-containerImg{
            width: 278px;
            height: 280px;
            border: 1px solid #f3f3f3;
            cursor: pointer;
            img{
              width: 100%;
              height: 100%;
            }
          }
          h2{
            width: 278px;
            height: 50px;
            line-height: 50px;
            margin-left: 10px;
            font-size: 16px;
            color: #DD3915;
          }
          .last-name{
            padding:0 20px 0 10px;
            
          }
          .last-red{
            height: 60px;
            line-height: 60px;
            :nth-child(1){
              margin-left: 10px;
              float: left;
            }
            :nth-child(2){
              float: right;
              margin-right: 8px;
            }
            :nth-child(3){
              float: right;
              margin-right: 10px;
            }
          }
          .last-user{
            margin-left:10px;
            margin-bottom: 10px;
            img{
              width: 30px;
              height: 30px;
              border-radius: 50%;
            }
            span{
              margin-left: 5px;
              height: 30px;
              line-height: 30px;
            }
            :nth-of-type(1){
              color: #DD3915;
            }
            :nth-of-type(2){
              color:#333;
            }
          }
        }
      }
    }
    
  }
}
  
.sectionNoLogin{
  display: block;
    // display:none;
    .works-best{
      .last-container{
        margin: 0 auto;
        color: rgb(59, 58, 58);
        .last-container-list{
          width:1000px;
          min-height:800px;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          li{
            width: 290px;
            min-height: 482px;
            border-bottom:1px solid #eee;
            margin-bottom: 30px;
            .last-containerImg{
              width: 290px;
              height: 280px;
              border: 1px solid #f3f3f3;
              cursor: pointer;
              img{
                width: 100%;
                height: 100%;
              }
            }
            h2{
              width: 278px;
              height: 50px;
              line-height: 50px;
              margin-left: 10px;
              font-size: 16px;
              color: #DD3915;
            }
            .last-name{
              padding:0 20px 0 10px;
              
            }
            .last-red{
              height: 60px;
              line-height: 60px;
              :nth-child(1){
                margin-left: 10px;
                float: left;
              }
              :nth-child(2){
                float: right;
                margin-right: 8px;
              }
              :nth-child(3){
                float: right;
                margin-right: 10px;
              }
            }
            .last-user{
              margin-left:10px;
              margin-bottom: 10px;
              cursor: pointer;
              img{
                width: 30px;
                height: 30px;
                border-radius: 50%;
              }
              span{
                margin-left: 5px;
                height: 30px;
                line-height: 30px;
              }
              :nth-of-type(1){
                color: #DD3915;
              }
              :nth-of-type(2){
                color:#333;
              }
            }
          }
        }
      }
      
    }
  .works-update{
    padding-top: 20px;
    .update-left{
      // width: 660px;
      float: left;
      .update-txt{
        margin-bottom: 20px;
        color: #909090;
        font-size: 16px;
        line-height: 1.8;
      }
      .update-list{
        width: 660px;
        min-height: 300px;
        ul{
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          li{
            width: 300px;
            margin-bottom: 20px;
            .update-list1{
              float: left;
              width: 60px;
              height: 60px;
              
              img{
                width: 100%;
                height: 100%;
                border-radius: 50%;
              }
            }
            .update-list2{
              float: left;
              width: 100px;
              margin: 0 20px;
              :nth-child(1){
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                a{
                  color: #222;
                  font-size: 14px;
                  &:hover{
                    color: #DD3915;
                  }
                }

              }
              :nth-child(2){
                font-size: 12px;
              }
              :nth-child(3){
                font-size: 12px;
              }
            }
            .update-list3{
              float: right;
              padding:10px 20px 0 0;
              cursor: pointer;
              a{
                display: block;
                background: #DD3915;
                width: 80px;
                height: 40px;
                color: #fff;
                text-align: center;
                line-height: 40px;
              }
            }
          }
        }
      }
    }
    .update-right{
      float: right;
      width:300px;
      height: 40px;
      line-height: 40px;
      margin-left: 20px;  
      font-size: 16px;
      span{
        font-size: 18px;
      }
      a{
        color: #DD3915;
        &:hover{
          background: #DD3915;
          color: #fff;
        }
      }
      .update-right1{
        padding: 15px;
        margin-bottom: 40px;
        background-color: #f5f6f5;
      }
      .update-right2{
        padding: 15px;
        line-height: 1.8;
        background-color: #f5f6f5;
      }
    }
  }
}
 

.works-allupdate{
  .allupdate-container{
    margin: 0 auto;
    color: rgb(59, 58, 58);
    .allupdate-container-list{
      width:1000px;
      min-height:800px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      li{
        width: 278px;
        min-height: 460px;
        border-bottom:1px solid #eee;
        margin-bottom: 30px;
        .allupdate-containerImg{
          width: 278px;
          height: 280px;
          border: 1px solid #f3f3f3;
          cursor: pointer;
          img{
            width: 100%;
            height: 100%;
          }
        }
        h2{
          width: 278px;
          height: 50px;
          line-height: 50px;
          margin-left: 10px;
          font-size: 16px;
          color: #DD3915;
        }
        .allupdate-name{
          padding:0 10px 0 10px;
          min-height: 20px;
        }
        .allupdate-red{
          height: 60px;
          line-height: 60px;
          :nth-child(1){
            margin-left: 10px;
            float: left;
          }
          :nth-child(2){
            float: right;
            margin-right: 8px;
          }
          :nth-child(3){
            float: right;
            margin-right: 10px;
          }
        }
        .allupdate-user{
          margin-left:10px;
          height: 30px;
          margin-bottom: 15px;
          cursor: pointer;
          span{
            margin-left: 5px;
            height: 30px;
            line-height: 30px;
            cursor: pointer;
          }
            img{
              display: block;
              // float: left;
              width: 30px;
              height: 30px;
              border-radius: 50%;
            }
          :nth-of-type(1){
            float: left;
            color: #DD3915;
          }
          :nth-of-type(2){
            float: left;
            color:#333;
          }
        }
      }
    }
  }
}